<template>
  <div class="heart">
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
</div>
</template>
<style>
body {
  margin: 0;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(circle at center, navy, black);
}

.heart {
  width: 14em;
  height: 11em;
  font-size: 20px;
  display: flex;
  justify-content: space-between;
}

.heart span {
  width: 1em;
  height: var(--h);
  background-color: var(--c);
  border-radius: 0.5em;
  position: relative;
  top: var(--t);
  animation: beating 5s infinite;
}

.heart span:nth-child(1),
.heart span:nth-child(9) {
  --c: orangered;
  --h: 3em;
  --t: 2.2em;
}

.heart span:nth-child(2),
.heart span:nth-child(8) {
  --c: gold;
  --h: 6em;
  --t: 0.6em;
}

.heart span:nth-child(3),
.heart span:nth-child(7) {
  --c: limegreen;
  --h: 8em;
  --t: 0;
}

.heart span:nth-child(4),
.heart span:nth-child(6) {
  --c: dodgerblue;
  --h: 9em;
  --t: 0.8em;
}

.heart span:nth-child(5) {
  --c: mediumpurple;
  --h: 9.4em;
  --t: 1.6em;
}

@keyframes beating {
  0%, 30% {
    top: var(--t);
    height: var(--h);
    background-color: var(--c);
    filter: blur(0);
    width: 1em;
  }

  60%, 70% {
    top: 25%;
    height: 50%;
    background-color: lightblue;
    filter: blur(5px);
    width: 0.1em;
  }
}

</style>
